import { packageCopy, packageList, packageRemove, packageStatus } from "@/services/chargingManage";
import { formatMessage } from "umi-plugin-react/locale";
import { Button, Input, message, Modal, Table } from "antd";
import moment from "moment";
import React from "react";
import testData from "../resourceManage/testData";
import PackageDrawer from "./packageDrawer";

class PackageList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      total: 0,
      loading: false,
      search: "",
      current: 1,
      size: 10,
      selectedRowKeys: [],
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList = () => {
    this.setState({ loading: true }, async () => {
      const { search, current, size } = this.state;
      const res = await packageList({ search, current, size });
      this.setState({
        loading: false,
        list: res.records,
        total: res.total,
        selectedRowKeys: [],
      });
    });
  };

  doSearch = (current, size) => {
    this.setState({ current, size }, () => {
      this.getList();
    });
  };

  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  };

  /**
   *
   * @param {*} row 行数据
   * @param {*} readOnly 是否只读
   */
  openDrawer = (row, readOnly) => {
    this.PackageDrawer.initModal(row, readOnly);
  };

  confirmModal = (id) => {
    const that = this;
    Modal.confirm({
      title: formatMessage({ id: "chargingManage.packageManage.packageList.confirmDelete" }),
      okText: formatMessage({ id: "chargingManage.packageManage.packageList.confirm" }),
      cancelText: formatMessage({ id: "chargingManage.packageManage.packageList.cancel" }),
      okType: "danger",
      onOk: () => {
        that.doRemove(id);
      },
    });
  };

  doRemove = async (id) => {
    const res = await packageRemove({ id });
    message.info(res.message);
    this.getList();
  };

  doCopy = async () => {
    const res = await packageCopy({ id: this.state.selectedRowKeys[0] });
    message.info(res.message);
    this.getList();
  };

  changeStatus = async (isAble) => {
    const res = await packageStatus({ ids: this.state.selectedRowKeys, isAble });
    message.info(res.message);
    this.getList();
  };

  render() {
    const { search, current, size, list, loading, total, selectedRowKeys } = this.state;
    const columns = [
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.packageName" }),
        dataIndex: "name",
        width: 150,
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.description" }),
        dataIndex: "describeStr",
        width: 150,
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.packageType" }),
        dataIndex: "typeStr",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.specialAgreement" }),
        dataIndex: "purpose",
        width: 110,
        render: (type) => {
          return type == 0
            ? formatMessage({ id: "chargingManage.packageManage.packageList.common" })
            : formatMessage({ id: "chargingManage.packageManage.packageList.special" });
        },
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.packagePrice" }),
        dataIndex: "price",
        width: 100,
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.effectiveDate" }),
        dataIndex: "enableDate",
        width: 150,
        render: (time) => {
          return time ? moment(time).format("YYYY-MM-DD") : "";
        },
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.expiryDate" }),
        dataIndex: "disableDate",
        width: 150,
        render: (time) => {
          return time ? moment(time).format("YYYY-MM-DD") : "";
        },
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.creationDate" }),
        dataIndex: "createTime",
        width: 150,
        render: (time) => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : "";
        },
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.configureResources" }),
        dataIndex: "preview",
        width: 200,
      },
      
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.status" }),
        dataIndex: "isAble",
        width: 100,
        render: (status) => {
          return status == 1 ? formatMessage({ id: "chargingManage.packageManage.packageList.disablePackage" }) : formatMessage({ id: "chargingManage.packageManage.packageList.enablePackage" });
        },
      },
      {
        title: formatMessage({ id: "chargingManage.packageManage.packageList.operation" }),
        width: 150,
        fixed: "right",
        render: (text, row) => {
          return (
            <div>
              <Button type="primary" size="small" onClick={() => this.openDrawer(row, row.isAble == 0)}>
                {row.isAble == 0
                  ? formatMessage({ id: "chargingManage.packageManage.packageList.view" })
                  : formatMessage({ id: "chargingManage.packageManage.packageList.edit" })}
              </Button>
              {row.isAble == 1 ? (
                <Button type="danger" size="small" style={{ marginLeft: 8 }} onClick={() => this.confirmModal(row.id)}>
                  {formatMessage({ id: "chargingManage.packageManage.packageList.delete" })}
                </Button>
              ) : (
                ""
              )}
            </div>
          );
        },
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <div>
        <div className="topOptionBox">
          <Input.Search
            placeholder={formatMessage({ id: "chargingManage.packageManage.packageList.searchPackage" })}
            style={{ width: 200 }}
            value={search}
            onChange={(e) => this.setState({ search: e.target.value })}
            onSearch={() => this.doSearch(1, size)}
          />
          <div>
            <Button type="primary" style={{ marginRight: 8 }} onClick={() => this.openDrawer(null, false)}>
              {formatMessage({ id: "chargingManage.packageManage.packageList.newPackage" })}
            </Button>
            <Button style={{ marginRight: 8 }} onClick={this.doCopy} disabled={selectedRowKeys.length != 1}>
              {formatMessage({ id: "chargingManage.packageManage.packageList.copyPackage" })}
            </Button>
            <Button style={{ marginRight: 8 }} disabled={selectedRowKeys.length == 0} onClick={() => this.changeStatus(1)}>
              {formatMessage({ id: "chargingManage.packageManage.packageList.disablePackage" })}
            </Button>
            <Button disabled={selectedRowKeys.length == 0} onClick={() => this.changeStatus(0)}>
              {formatMessage({ id: "chargingManage.packageManage.packageList.enablePackage" })}
            </Button>
          </div>
        </div>

        <Table
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={"id"}
          scroll={{ x: "auto" }}
          pagination={{
            current,
            pageSize: size,
            total,
            showQuickJumper: true,
            onChange: this.doSearch,
          }}
          rowSelection={rowSelection}
        />

        <PackageDrawer onRef={(ref) => (this.PackageDrawer = ref)} refreshList={() => this.doSearch(1, size)} />
      </div>
    );
  }
}

export default PackageList;
